<script setup lang="ts">
import RecursiveMenuItem from './RecursiveMenuItem.vue';
import { getCurrentInstance, ComponentInternalInstance } from 'vue';

const { appContext } = <ComponentInternalInstance>getCurrentInstance()
const icons = appContext.config.globalProperties.$antIcons
interface MenuItem {
  path: string;
  name: string;
  icon: string;
  children?: MenuItem[];
}

const props = defineProps({
  item: {
    type: Object as () => MenuItem,
    required: true,
  },
});
const item = props.item

</script>

<template>
  <template v-if="item.children && item.children.length > 0">
    <a-sub-menu :key="item.path">
      <template #title>
            <span>
              <component :is="icons[item.icon]" />
              <span>{{ item.name }}</span>
            </span>
      </template>
      <recursive-menu-item v-for="child in item.children" :key="child.path" :item="child" />
    </a-sub-menu>
  </template>
  <template v-else>
    <a-menu-item :key="item.path" :title="item.name" :iconFont="item.icon">
      <component :is="icons[item.icon]" />
      <span>{{ item.name }}</span>
    </a-menu-item>
  </template>
</template>

